<template>
  <div class="body">
    <div id="fotterLeft" class="echarts"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { color } from "echarts/lib/export";
export default {
  props: ["stateList"],
  data() {
    return {
      options: [
        {
          value: "1",
          label: "2024",
        },
        {
          value: "2",
          label: "2023",
        },
      ],
      value: "1",
    };
  },
  methods: {
    everyDay() {
      var chartDom = document.getElementById("fotterLeft");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },

        legend: {
          bottom: 10,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "收支",

            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "盈亏",

            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        series: [
          {
            name: "支出",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
            color: "#D97559",
          },
          {
            name: "收入",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
            color: "#E4C477",
          },
          {
            name: "盈亏",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
            color: "#DAA67B",
          },
        ],
      };

      option && myChart.setOption(option);
      // 添加点击事件监听器
      myChart.getZr().on("click", function (params) {
        var pointInPixel = [params.offsetX, params.offsetY];
        if (myChart.containPixel("grid", pointInPixel)) {
          var xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
            params.offsetX,
            params.offsetY,
          ])[0];
          var month = option.xAxis[0].data[xIndex];
          console.log("month:", month);
          // 在这里可以处理点击事件，例如获取底部刻度的月份值
        }
      });
    },
  },
  mounted() {
    this.everyDay();
  },
};
</script>
<style lang="scss" scoped>
/* @media (min-width: 1925px) {
  .echarts {
    width: 100%;
    height: 90%;
  }
}
@media (min-width: 1280px) and (max-width: 1925px) {
  .echarts {
    width: 100%;
    height: 85%;
  }
}
@media (min-width: 768px) and (max-width: 1280px) {
  .echarts {
    width: 100%;
    height: 75%;
  }
} */
.body {
  height: 100%;
  background-color: white !important;
}
.echarts {
  width: 96%;
  height: 90%;
}
.select {
  width: 100px;
  height: 100px;
}
</style>
